<template>
  <div
    :ref="`{{camelCase name}}${id}`"
    class="{{snakeCssCase name}}"
  ></div>
</template>

<script>
import commonMixin from '@/utils/mixin'
export default {
  name: "{{camelCase name}}",
  mixins: [commonMixin],
  props: {
    id: {
      type: [Number, String],
      default: 1
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      resDebounce: null,//防抖
      chart: null, // chart实例,
    }
  },
  mounted() {
    this.initChart()
  },
  methods:{
    // 初始化
    initChart() {
      this.chart = this.$echarts.init(this.$refs[`{{camelCase name}}${this.id}`])
      const option= this.getOption()
      this.chart.setOption(option)
      this.resDebounce = this.debounce(this.chart.resize, 300)
      window.addEventListener('resize', this.resDebounce)
    },
    // 自定义配置
    getOption(options = {}) {
      let option = {}
      return option
     }
  },
  destroyed() {
    // 防止内存泄露
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    window.addEventListener('resize', this.resDebounce)
  }
}
</script>

<style lang="less" scoped>
.{{snakeCssCase name}} {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
